<script setup>
// import { GetListProfitAPI } from '@/api/statistics/procure/orderTack.js'
const { proxy } = getCurrentInstance()

// 列表数据
const objData = ref([])

// 按钮
const buttonList = ref([{ type: 'export', hasPermi: 'finance:dataChange:export' }])

const ruleForm = reactive({
  time: ''
})

// 状态
const state = reactive({
  treeLoading: false,
  loading: false, // 列表加载状态
  btnLoading: false, // 按钮加载状态
  isShow: false, // 弹窗状态
  title: '新增', // 弹窗标题
  total: 0 // 列表总量
})

// 查询条件
const query = reactive({
  pageNum: 1,
  pageSize: 10
})
const defauleTime = ref([new Date(), new Date(Date.now() + 1000 * 60 * 60 * 24)])
// 查询条件 枚举
const selectList = ref([
  { label: '开单时间', type: '日期范围' },
  { label: '客户', type: '输入框', model: '' }
])
//设置默认日期
const defaultDate = () => {
  //获取新的时间
  let date = new Date()
  //获取当前时间的年份转为字符串
  let year = date.getFullYear().toString()
  //获取月份，由于月份从0开始，此处要加1，判断是否小于10，如果是在字符串前面拼接'0'
  let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1).toString() : (date.getMonth() + 1).toString()
  //获取天，判断是否小于10，如果是在字符串前面拼接'0'
  let da = date.getDate() < 10 ? '0' + date.getDate().toString() : date.getDate().toString()
  //字符串拼接，开始时间，结束时间
  let end = year + '-' + month + '-' + da //当天
  let beg = year + '-' + month + '-01' //当月第一天
  ruleForm.time = [beg, end] //将值赋给绑定的数据
}
defaultDate()
// 导出
const exportFun = () => {}

// // 查询条件
// const selectSubmit = (val) => {
//   Object.keys(val).forEach((keyItem) => (query[keyItem] = val[keyItem]))
//   getList()
// }

//查询
const submit = () => {
  getList()
}

//重置
const reset = () => {
  defaultDate() //重置为当月时间
  getList() //调取列表接口
}

// 获取列表
const getList = async () => {
  state.loading = true
  try {
    query.beginTime = ruleForm.time[0] //默认时间
    query.endTime = ruleForm.time[1] //默认时间
    const result = await GetListProfitAPI(query)
    objData.value = result
    // state.total = result.total
  } catch {
  } finally {
    state.loading = false
  }
}
getList()
</script>

<template>
  <div class="app-container">
    <el-form ref="ruleFormRef" :model="ruleForm" inline scroll-to-error label-width="100px">
      <el-form-item label="开单日期">
        <el-date-picker
          v-model="ruleForm.time"
          type="daterange"
          range-separator="-"
          start-placeholder="开始"
          end-placeholder="结束"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" @click="submit">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 查询条件组件 -->
    <!-- <p-select-form :selectForm="selectList" @selectSubmit="selectSubmit" /> -->
    <el-card>
      <!-- 按钮组件 -->
      <p-button :list="buttonList" />
      <!-- 表格数据 -->
      <table border="1" align="center">
        <body>
          <tr>
            <th>项目</th>
            <th>行次</th>
            <th>本期金额</th>
          </tr>
          <tr>
            <td class="title">一、主营业务</td>
            <td>1</td>
            <td></td>
          </tr>
          <tr>
            <td>加：销售收入</td>
            <td>2</td>
            <td>{{ objData.saleAmount }}</td>
          </tr>
          <tr>
            <td>减：收款折扣</td>
            <td>3</td>
            <td>{{ objData.collectionDiscount }}</td>
          </tr>
          <tr>
            <td>减：销售成本</td>
            <td>4</td>
            <td>{{ objData.saleCost }}</td>
          </tr>
          <tr>
            <td>加：付款折扣</td>
            <td>5</td>
            <td>{{ objData.paymentDiscount }}</td>
          </tr>
          <tr>
            <td>加：盘盈盘亏</td>
            <td>6</td>
            <td>{{ objData.discLoss }}</td>
          </tr>
          <tr>
            <td class="fontClass">主营业务利润</td>
            <td>7</td>
            <td>{{ objData.operatingProfit }}</td>
          </tr>
          <tr>
            <td class="title">二、其他业务</td>
            <td>8</td>
            <td></td>
          </tr>
          <tr>
            <td>其他收入</td>
            <td>9</td>
            <td>{{ objData.otherIncome }}</td>
          </tr>
          <tr>
            <td>其他支出</td>
            <td>10</td>
            <td>{{ objData.otherExpenditure }}</td>
          </tr>
          <tr>
            <td>其他业务利润</td>
            <td>11</td>
            <td>{{ objData.otherBusiness }}</td>
          </tr>
          <tr>
            <td class="fontClass">净利润</td>
            <td>12</td>
            <td>{{ objData.netProfit }}</td>
          </tr>
        </body>
      </table>
    </el-card>
  </div>
</template>
<style scoped lang="scss">
.title {
  text-align-last: left;
}
.fontClass {
  font-weight: 700;
}
table {
  border-collapse: collapse;
  /*设置背景颜色*/
  /* background-color: #bfa; */
}

/*
* 设置边框
*/
td,
th {
  width: 400px;
  height: 50px;
  line-height: 50px;
  padding: 0 10px;
  text-align: center;
  border: 1px solid black;
}

/*
     * 设置隔行变色
     */
tbody > tr:nth-child(even) {
  background-color: #bfa;
}
.app-container ::v-deep .el-form-item__content {
  width: 240px !important;
}
.app-container ::v-deep .el-date-editor {
  width: 240px !important;
}
</style>
